<template>
  <table class="table table-bordered table-hover">
    <caption>Push 报表 <a class="btn btn-sm btn-primary" @click="exportTable">导出</a></caption>
    <thead>
      <tr>
        <th class="col-xs-2"></th>
        <th class="col-xs-2">ID</th>
        <th class="col-xs-2">内容</th>
        <th class="col-xs-1">平台</th>
        <th class="col-xs-1 text-right">计划下发人数</th>
        <th class="col-xs-1 text-center">场景</th>
        <th class="col-xs-1 text-right">成功下发人数</th>
        <th class="col-xs-1 text-right">曝光人数</th>
        <th class="col-xs-1 text-right">点击人数</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="it in records">
        <tr>
          <td rowspan="4" class="text-center">{{it.createTime}}</td>
          <td rowspan="4">{{it._id}}</td>
          <td rowspan="4">{{it.content}}</td>
          <td rowspan="2">iOS</td>
          <td rowspan="2" class="text-right">{{it.iosPushCount}}</td>
          <td class="text-center">App内</td>
          <td class="text-right">{{it.iosInSucPushCount}}</td>
          <td class="text-right">{{it.iosInShowCount}}</td>
          <td class="text-right">{{it.iosInReadCount}}</td>
        </tr>
        <tr>
          <td class="text-center">App外</td>
          <td class="text-right">{{it.iosOutSucPushCount}}</td>
          <td class="text-right">{{it.iosOutShowCount}}</td>
          <td class="text-right">{{it.iosOutReadCount}}</td>
        </tr>
        <tr>
          <td rowspan="2">Android</td>
          <td rowspan="2" class="text-right">{{it.andPushCount}}</td>
          <td class="text-center">App内</td>
          <td class="text-right">{{it.andInSucPushCount}}</td>
          <td class="text-right">{{it.andInShowCount}}</td>
          <td class="text-right">{{it.andInReadCount}}</td>
        </tr>
        <tr>
          <td class="text-center">App外</td>
          <td class="text-right">{{it.andOutSucPushCount}}</td>
          <td class="text-right">{{it.andOutShowCount}}</td>
          <td class="text-right">{{it.andOutReadCount}}</td>
        </tr>
      </template>
      <tr>
        <td colspan="9" class="notice">
          备注：<br>
          1）人数指设备数；<br>
          2）只展示手动Push的数据；<br>
          3）平台分iOS与Android，场景分App外和App内；<br>
          4）iOS没有曝光人数。
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style src="./push.css" scoped></style>
<script src="./push.js"></script>